<template>
  <div class="about">
    <p><input type="file" @change="onChage" /><button @click="upload">上传</button></p>
    <img :src="image" alt="">
    
  </div>
</template>
<script>
import {apiupload,apiupdateUsers,uploadUrl} from '@/api'
import {ref,onMounted} from "vue"

export default {
  components:{
  },
  setup() {
    let file = null
    let refFile = null
    const image = ref(null)
    const onChage = (e) => {
      file = e.target.files[0]
    }

    const setLogo = (logo) => {
      let ops = {
        logo,
        username: sessionStorage.username
      }
      apiupdateUsers(ops).then(res=>{
        console.log(res)
      })
    } 

    const upload = () => {
      if(!file){
        alert('请先上传文件')
        return
      }
      const formData = new FormData
      formData.append('file',file)
      apiupload(formData,{headers:{'Content-Type':'multipart/form-data'}}).then(res => {
        const url = res
        image.value = url
        alert('图片上传成功')
        refFile.value = ""
        setLogo(url)
      })
    }
    onMounted(()=>{
      refFile = document.querySelector('input')
    })
    return {
      image,
      onChage,
      upload,
    }
  },
}
</script>

